<template>
<div class="enterprise">
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="公司名称" prop="name">
            <Input v-model="formValidate.name" placeholder="请输入与营业执照匹配的公司名称"></Input>
        </FormItem>
        <FormItem label="公司税号" prop="duty">
            <Input v-model="formValidate.duty" placeholder="请输入公司税号"></Input>
        </FormItem>
        <FormItem label="公司所在地" prop="value1">
            <Cascader :data="data" v-model="formValidate.value1"></Cascader>
        </FormItem>
        <div class="phone">
            <FormItem label="公司固话" prop="phone">
                <Input v-model="formValidate.phone" placeholder="请输入公司固定电话（选填）"></Input>
            </FormItem>
        </div>
        <!-- <FormItem label="公司固话" prop="phone">
            <Input v-model="formValidate.phone" placeholder="请输入公司固定电话（选填）"></Input>
        </FormItem> -->
        <FormItem label="联系人姓名" prop="userName">
            <Input v-model="formValidate.userName" placeholder="请输入联系人姓名"></Input>
        </FormItem>
        <FormItem label="联系人部门" prop="department">
            <Input v-model="formValidate.department" placeholder="请输入联系人所在部门"></Input>
        </FormItem>
        <FormItem label="贸易者身份" prop="gender">
            <RadioGroup v-model="formValidate.gender">
                <Radio label="market">销售</Radio>
                <Radio label="caigou">采购</Radio>
                <Radio label="both">两者都是</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="手机号码" prop="telephone">
            <Input v-model="formValidate.telephone" placeholder="请输入手机号码"></Input>
        </FormItem>
        <FormItem label="验证码" prop="vcode">
            <div class="vcode">
                <Input v-model="formValidate.vcode" placeholder="请输入验证码"></Input>
                <span class="vcode-title" ></span>
                <span class="vcodeclick" >换一张</span>
            </div>
        </FormItem>
        <FormItem label="手机验证码" prop="telePhoveVcode">
            <div class="telePhoveVcode">
                <Input type="text" v-model="formValidate.telePhoveVcode" placeholder="请输入短信验证码"></Input>
                <Button type="primary" class="vcodeBtn" v-text="vcodeData.text" :disabled="vcodeData.disabled" ></Button>
            </div>
        </FormItem>
        <FormItem label="设置密码" prop="passwd">
            <Input type="password" v-model="formValidate.passwd" placeholder="6-20位字符（包括数字、字母、符号两个以上组合）"></Input>
        </FormItem>
        <FormItem label="确认密码" prop="passwdCheck">
            <Input type="password" v-model="formValidate.passwdCheck" placeholder="请再次确认密码"></Input>
        </FormItem>
        <FormItem prop="interest">
            <CheckboxGroup v-model="formValidate.interest" @on-change="checkAllGroupChange">
                <Checkbox label="true">同意新华印务《用户协议》和《隐私声明》</Checkbox>
            </CheckboxGroup>
        </FormItem>
        <FormItem ref='clickBtn'>
            <Button type="primary" class="registeBtn"  @click="handleSubmit()" :disabled="btnData.disabled">登录</Button>
        </FormItem>
    </Form>
</div>
</template>

<script>
import place from '@/network/common/place.js'  // 级联选择器地点
const phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/; //手机验证
const pwdReg = /^[a-zA-Z0-9!@#$%^&*()_+]{6,16}$/; //密码验证
export default {
    name: 'RegisterEnterprise',
    data() {
        //      var validateVcode = (rule, value, callback) => {
        //   // 将用户输入数字转成字符串，同时转换成大写
        //   value = value + ''
        //   if (value.length > 4) {
        //     value = value.substring(0, 4)
        //     this.$set(this.loginInfo, 'vcode', value)
        //   }
        // }

        const validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('密码不能为空'));
            } else {
                if (this.formValidate.passwdCheck !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.formValidate.validateField('passwdCheck');
                }
                callback();
            }
        };
        const validatePassCheck = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.formValidate.passwd) {
                callback(new Error('输入的密码不一致'));
            } else {
                callback();
            }
        };
        return {
            formValidate: {
                name: '',
                duty: '',
                value1: [],
                phone: '',
                userName: '',
                department: '',
                gender: '',
                telephone: '',
                vcode: '',
                telePhoveVcode: '',
                passwd: '',
                passwdCheck: '',
                interest: ['true'],
            },
            ccode: '', // 图片验证码
            data:place,
            ruleValidate: {
                telephone: [{
                    required: true,
                    message: '手机号码不能为空',
                    trigger: 'blur'
                }, {
                    pattern: phoneReg,
                    message: '请输入正确的手机号码',
                    trigger: 'blur'
                }],
                passwd: [{
                    validator: validatePass,
                    trigger: 'blur'
                }, {
                    pattern: pwdReg,
                    message: '密码由（6-20位字母/数字/符号）组成',
                    trigger: 'blur'
                }],
                passwdCheck: [{
                    validator: validatePassCheck,
                    trigger: 'blur'
                }],
                interest: [{
                    required: true,
                    type: 'array',
                    min: 0,
                    message: '请仔细阅读相关协议',
                    trigger: 'change'
                }, ],
                // vcode: [{
                //     required: true,
                //     validator: validateVcode,
                //     triger: 'blur'
                // }],
            },
            // 验证码按钮
            vcodeData: {
                text: '获取验证码',
                disabled: false,
            },
            // 注册按钮
            btnData: {
                disabled: false,
            },
        }
    },
    // mounted() {
    //     this.generatedCode()
    // },
    methods: {
        //     generatedCode () {
        //   const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
        //     'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
        //   let code = ''
        //   for (let i = 0; i < 4; i++) {
        //     let index = Math.floor(Math.random() * 36)
        //     code += random[index]
        //   }
        //   this.ccode = code
        // }

        // 协议
        checkAllGroupChange() {
            if (this.formValidate.interest.length != 1) {
                this.btnData.disabled = true;

            } else {
                this.btnData.disabled = false;
            }
        },
        handleSubmit() {

        }
    },
}
</script>

<style lang="less" scoped>
.vcode {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;

    .ivu-input-wrapper {
        width: 320px;
    }

    .vcode-title {
        display: block;
        width: 110px;
        height: 32px;
        border: 1px solid #AEC0DA;
        text-align: center;
        line-height: 32px;
        margin: 0 15px;
    }

    .vcodeclick {
        color: #398BEF;
        cursor: pointer;
    }

}

.registeBtn {
    background-color: #D92410;
    border-color: none !important;
    width: 410px;
    font-size: 18px;

    &:hover {
        border-color: none;
        background-color: #D92410;
    }

}

.telePhoveVcode {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;

    .vcodeBtn {
        width: 140px;
        margin-left: 15px;
        background-color: #D92410;
    }
}

.enterprise {
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    display: -moz-flex;
    justify-content: center;
    margin: 68px 0 107px;
    line-height: 30px;

    .ivu-form {
        width: 600px;
    }
}

.ivu-form-item-label {
    text-align: left !important;
    width: 82px !important;
}

.ivu-form-item-content {
    margin-left: 82px !important;
}

.phone {
    label::before{
        content: ''
    }
}
.ivu-tabs.ivu-tabs-card>.ivu-tabs-bar .ivu-tabs-tab-active{
    color:#D92410!important;
}
.ivu-tabs-ink-bar{
    background-color: #f2f2f2!important;
}
.ivu-tabs-nav .ivu-tabs-tab:hover{
    color: #D92410;
    border-color: #D92410;
}
.ivu-btn-primary{
    border-color: #fff;
}
.ivu-tabs-nav-container:focus .ivu-tabs-tab-focused{
    border-color: #D92410!important;
}
</style>
